<!--
 * @Description: 流程管理
 * @Author: 
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-04-14 16:38:18
-->
<template>
	<div class="pages_content ProcessManagement table">
		<el-container>
			<el-header>
				<breaDcrumb />
			</el-header>
			<el-main style="display: flex">
				<div class="main_left scroll">
					<treeContainer :arr="treeArry" @chooseTree="setTree" />
				</div>
				<div class="main_right card_bg">
					<div class="header_right" @click="showCardNav = !showCardNav">
						<div class="title">搜索</div>
						<div>
							<transition name="from"></transition>
							<span v-show="!showCardNav"><i style="margin-right: 5px;" class="el-icon-arrow-down"></i></span>
							<transition name="to"></transition>
							<span v-show="showCardNav"><i style="margin-right: 5px;" class="el-icon-arrow-up"></i></span>
						</div>
					</div>
					<div v-show="showCardNav" class="hr"></div>
					<el-collapse-transition>
						<div v-show="showCardNav" class="search">
							<span>
								<span style="margin-right: 12px;">名称</span>
								<el-input v-model="tableParam.name" style="width: 20%;max-width: 200px;" clearable placeholder="请输入"  @keyup.enter.native="initData()"/>
							</span>
							<span style="margin-left: 24px;">
								<span style="margin-right: 12px;">编码</span>
								<el-input v-model="tableParam.code" style="width: 20%;max-width: 200px;" clearable placeholder="请输入"  @keyup.enter.native="initData()"/>
							</span>
							<el-button icon="el-icon-search" size="medium" class="bottom_all" @click="initData()">查 询</el-button>
							<el-button size="medium" class="bottom_all_two" @click="reset()">重 置</el-button>
						</div>
					</el-collapse-transition>
					<div class="hr"></div>
					<div class="card scroll">
						<div class="card_nav">
							<div>
								<el-button size="small" class="bottom_all" style="margin-left: 0;" @click="add()">
									<i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
									添加
								</el-button>
								<el-button size="small" class="bottom_two" @click="batchUpdateOrDelete('update_status', 0)">
									<i class="icon iconfont iconicon_button_delete" style="font-size: 12px;"></i>
									删除
								</el-button>
								<el-button size="small" class="bottom_three" @click="batchUpdateOrDelete('update_enable', 1)">
									<i class="icon iconfont iconicon_button_startuse" style="font-size: 12px;"></i>
									启用
								</el-button>
								<el-button size="small" class="bottom_four" @click="batchUpdateOrDelete('update_enable', 0)">
									<i class="icon iconfont  iconicon_button_disable1" style="font-size: 12px;"></i>
									禁用
								</el-button>
							</div>
							<div>
								<el-dropdown :hide-on-click="false" trigger="click" style="margin: 0 20px;">
									<el-link :underline="false">
										<i class="el-icon-sort el-icon--left"></i>
										筛选
									</el-link>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item v-for="(item, index) in table" :key="index">
											<el-checkbox v-model="item.status">{{ item.label }}</el-checkbox>
										</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
								<el-link :underline="false" @click="Download()">
									<i class="el-icon-upload2 el-icon--left"></i>
									导出
								</el-link>
							</div>
						</div>
						<!-- 列表 -->
						<div class="card_info" :style="style">
							<el-table ref="multipleTable" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
								<el-table-column align="center" type="selection" width="50"></el-table-column>
								<template v-for="(item, index) in table">
									<el-table-column v-if="item.status" :key="index" :label="item.label" align="center" :width="item.width">
										<template slot-scope="scope">
											<el-button v-if="item.label == '操作'" class="bottom_one" size="mini" @click="update(scope.row)">
												<i class="icon iconfont iconicon_button_modification" style="font-size: 12px;"></i>
												修改
											</el-button>
											<el-button v-if="item.label == '操作' && scope.row.processType === 2" class="bottom_one" size="mini" @click="handleConfig(scope.row)">
												<i class="el-icon-setting" style="font-size: 12px;"></i>
												流程配置
											</el-button>
											<span v-if="item.prop === 'processType'">{{ processTypeList | fromatTable(scope.row.processType, 'name', 'id')}}</span>
											<span v-else-if="item.prop === 'enable'">{{ scope.row.enable===1?'启用':'禁用' }}</span>
											<span v-else-if="item.prop === 'formType'">{{ formTypeList | fromatTable(scope.row.formType, 'name', 'id')}}</span>
											<span v-else-if="item.label !== '操作'">{{ scope.row[item.prop] }}</span>
										</template>
									</el-table-column>
								</template>
							</el-table>
						</div>
					</div>
				</div>
			</el-main>
			<div class="card_bottom">
				<div class="card_bottom_left">
					<div class="top_page_totle">总共{{ total }}条</div>
					<el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="initData()"></el-pagination>
				</div>
				<div>
					<el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="initData()">刷新</el-button>
				</div>
			</div>
		</el-container>
		<!-- 添加 -->
		<el-dialog v-dialogDrag :visible.sync="dialogVisible" width="40%">
			<span slot="title" class="dialog-title">{{ dialogtitle }}</span>
			<el-form ref="form" :model="form" label-width="100px" :rules="rules">
				<el-form-item label="系统" prop="systemId">
					<el-select v-model="form.systemId" disabled placeholder="请选择" style="width:100%;">
						<el-option v-for="item in systemList" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="编码" prop="code">
					<el-input v-model="form.code" placeholder="请输入编码" clearable />
				</el-form-item>
				<el-form-item label="名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入名称" clearable />
				</el-form-item>
				<el-form-item label="编码规则" prop="codeRulesId">
					<el-select v-model="form.codeRulesId" filterable placeholder="请选择" style="width:100%;">
						<el-option v-for="item in rulesList" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="类别" prop="processType">
					<el-select v-model="form.processType" placeholder="请选择" style="width:100%;">
						<el-option v-for="item in processTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="父节点">
					<el-input v-model="form.parentName" disabled clearable />
				</el-form-item>
				<el-form-item v-if="form.processType===2" label="表单类型" prop="formType" :rules="form.processType===2?typeRules:''">
					<el-select v-model="form.formType" placeholder="请选择" style="width:100%;">
						<el-option v-for="item in formTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="描述">
					<el-input v-model="form.description" placeholder="请填写系统描述" class="textarea" type="textarea" resize="none" rows="5"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button class="bottom_all_two" @click="dialogVisible = false">取 消</el-button>
				<el-button class="bottom_all" type="primary" @click="save('form')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import breaDcrumb from '@/components/breadcrumb';
import treeContainer from '@/components/GlobalTree/tree';
import { mapGetters } from 'vuex';
import { queryPage as getRules } from '@/api/basedata/CodingRules';
import { queryPage } from '@/api/basedata/business';
import { saveOrUpdate, getFlowsList } from '@/api/Signed/flows';
import { batchUpdateOrDelete, Download } from '@/api/Signed/ProcessManagement';
import { formatTreeData } from '@/utils/utils'

export default {
	components: {
		breaDcrumb,
		treeContainer
	},
	data() {
		return {
			DownloadURL: Download,
			options: [],
			/*添加修改弹窗*/
			dialogVisible: false,
			loading: false,
			showConfig: true,
			dialogtitle: '',
			/*弹要修改过着添加的数据*/
			form: {
				name: '',
				code: '',
				systemId: '',
				systemName: '',
				codeRules: '',
				codeRulesId: '',
				processType: '',
				formType: '',
				description: '',
			},
			/*判断收起展开*/
			showCardNav: true,
			table: [
				{ label: '编码', width: 'auto', prop: 'code', status: true },
				{ label: '名称', width: 'auto', prop: 'name', status: true },
				{ label: '类别', width: 'auto', prop: 'processType', status: true },
				{ label: '表单类型', width: 'auto', prop: 'formType', status: true },
				{ label: '描述', width: 'auto', prop: 'description', status: true },
				{ label: '状态', width: 'auto', prop: 'enable', status: true },
				{ label: '排序号', width: 'auto', prop: 'sortNum', status: true },
				{ label: '操作', width: '220', prop: '', status: true }
			],
			/*列表选中的数据集*/
			tableParam: {
				page: 1,
				pageSize: 10,
				code: '',
				name: '',
			},
			total: 0,
			ids: [],
			tableData: [],
			treeArry: [],
			systemList: [],
			processTypeList: [{
				name: '文件夹',
				id: 1
			}, {
				name: '流程',
				id: 2
			}],
			formTypeList: [{
				name: '开发表单',
				id: 2
			}, {
				name: '自定义表单',
				id: 1
			}],
			rules: {
				code: [
					{ required: true, message: '请输入编码', trigger: 'blur' },
				],
				systemId: [
					{ required: true, message: '请选择系统', trigger: 'change' }
				],
				name: [
					{ required: true, message: '请输入名称', trigger: 'blur' },
				],
				processType: [
					{ required: true, message: '请选择类别', trigger: 'change' }
				],
				codeRulesId: [
					{ required: true, message: '请选择编码规则', trigger: 'change' }
				]
			},
			rulesList: [],
			typeRules: [{ required: true, message: '请选择系统', trigger: 'change' }],
			checkNode: '',
		};
	},
	mounted() {
		this.initSystemList();
	},
	methods: {
		/*弹窗列表数据添加*/
		addItemData() {
			const data = {
				code: '',
				extConfig: '',
				fileType: '',
				name: '',
				trillionSize: '',
				columnCount: '',
				multiLimit: 1
			};
			this.form.items.push(data);
		},
		/*重置*/
		reset() {
			this.tableParam.code = '';
			this.tableParam.name = '';
			this.initData();
		},
		/*删除，禁用，启用，排序*/
		batchUpdateOrDelete(type, index) {
			if (!this.ids.length) {
				this.$message({
					message: '请选择要操作的数据项',
					type: 'warning'
				});
				return;
			}
			const params = {
				ids: this.ids,
				status: index,
				type,
			}
			if (type === 'update_status') {
				this.$confirm('确定删除选中的数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonClass: 'bottom_all_two',
					confirmButtonClass: 'bottom_all',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					batchUpdateOrDelete(params).then(res => {
						if (res.code === 1001) {
							this.$message({
								type: 'success',
								message: '删除成功！！！'
							})
							this.initData();
						}
					})
				})
			} else if (type === 'update_enable' && index === 1) {
				batchUpdateOrDelete(params).then(res => {
					if (res.code === 1001) {
						this.$message({
							type: 'success',
							message: '启用成功！！！'
						})
						this.initData();
					}
				})
			} else {
				this.$confirm('确定禁用选中的数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: 'bottom_all_two',
					confirmButtonClass: 'bottom_all',
					type: 'warning'
				}).then(() => {
					batchUpdateOrDelete(params).then(res => {
						if (res.code === 1001) {
							this.$message({
								type: 'success',
								message: '禁用成功！！！'
							})
							this.initData();
						}
					})
				})
			}
		},
		/*接受树状数据*/
		setTree(e) {
			this.checkNode = e;
			if (e.children) {
				this.tableData = e.children;
				return
			}
			this.tableData = [e];
		},
		/*添加*/
		add() {
			if (!this.checkNode) {
				this.$message({
					message: '请先选择系统后添加！！！',
					type: 'warning'
				});
				return
			}
			const systemId = this.checkNode.parentId === 0 ? this.checkNode.id : this.checkNode.systemId;
			this.rulesList = this.rulesLists.filter((item) => (
				item.ruleTypeId === systemId
			));
			this.form = {
				name: '',
				code: '',
				systemId,
				codeRules: '',
				codeRulesId: '',
				parentName: this.checkNode.name,
				systemName: '',
				processType: '',
				formType: '',
				description: '',
			}
			this.dialogVisible = true;
			this.dialogtitle = '添加流程';
		},
		/*修改*/
		update(data) {
			this.form = {
				name: data.name,
				code: data.code,
				id: data.id,
				systemId: data.systemId,
				systemName: data.systemName,
				codeRules: data.codeRules,
				processType: data.processType,
				formType: data.formType,
				description: data.description,
				codeRulesId: data.codeRulesId,
			}
			this.rulesList = this.rulesLists.filter((item) => (
				item.ruleTypeId === data.systemId
			));
			this.dialogVisible = true;
			this.dialogtitle = '修改流程';
		},
		/*获取列表*/
		initData() {
			this.loading = true;
			getFlowsList(this.tableParam).then(res => {
				if (res.code === 1001) {
					this.tableData = res.data.data;
					this.total = res.data.totalRows;
				}
			});
			getFlowsList({ page: 1, pageSize: 1000 }).then(res => {
				if (res.code === 1001) {
					const newData = res.data.data.map((item) => (
						item.parentId === 'parent_id' ? { ...item, parentId: item.systemId } : { ...item }
					))
					this.treeArry = formatTreeData(newData.concat(this.systemList), 'id', 'parentId', 'children', 0);
				}
			});
		},
		initSystemList() {
			queryPage({ page: 1, pageSize: 1000 }).then(res => {
				if (res.code === 1001) {
					this.systemList = res.data.data.map((item) => (
						{ ...item, parentId: 0 }
					));
					this.initData()
				}
			});
			getRules({ page: 1, pageSize: 1000 }).then(res => {
				if (res.code === 1001) {
					this.rulesLists = res.data.data;
				}
			})
		},
		save(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					for (let i in this.systemList) {
						if (this.systemList[i].id === this.form.systemId) {
							this.form.systemName = this.systemList[i].name;
							break;
						}
					}
					for (let i in this.rulesList) {
						if (this.rulesList[i].id === this.form.codeRulesId) {
							this.form.codeRules = this.rulesList[i].rules;
							break;
						}
					}
					this.form.parentId = this.form.parentId ? this.form.parentId : 'parent_id';
					if (this.form.processType === 1) {
						this.form.formType = ''
					}
					saveOrUpdate(this.form).then(res => {
						if (res.code === 1001) {
							this.$message({
								message: '操作成功',
								type: 'success',
							});
							this.dialogVisible = false;
							this.initData();
						}
					})
				}
			});
		},
		handleSelectionChange(val) {
			const ids = val.map((item) => {
				return item.id
			})
			this.ids = ids;
		},
		handleConfig(data) {
			this.$router.push({ name: 'processConfig', query: { index: data.formType, id: data.id, name: data.name } });
		},
		sizeChange(value) {
			this.tableParam.pageSize = value;
			this.initData();
		},
	},
	computed: {
		...mapGetters({
			screenWidth: 'getscreenWidth',
			screenHeight: 'getscreenHeight',
			Collapse: 'getsCollapse'
		}),
		style() {
			let num = 0;
			if (this.Collapse) {
				num = this.screenWidth - 324;
			} else {
				num = this.screenWidth - 421;
			}
			return 'width:' + num + 'px;';
		}
	}
};
</script>
<style lang="scss" scoped>
.ProcessManagement {
  .el-link {
    i {
      color: $bg_color;
    }
  }
  .el-link:hover {
    color: $bg_color;
  }
  .dialoginfo {
    width: 560px;
    > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      > span {
        display: flex;
        align-items: center;
      }
    }
    .textarea_input {
      padding-top: 10px;
      align-items: flex-start;
      height: auto;
    }
  }
  font-size: $font_size;
}
</style>
